<template>
	<view class="pad_def pad_top">
		<u-toast ref="uToast"></u-toast>
		<view class="header_switc box box-align-center box-pack-between pad_def" v-if="false">
			<view class="left">
				<view class="tit">
					定位功能总开关
				</view>
				<view class="sub_tit">
					当学生平板开机（联网）后可随时查看其定位<br/>
					注：该功能开启后将影响平板电池续航时间
				</view>
			</view>
			<view class="right" >
				<u-switch v-model="locationChecked" active-color="#5993ff" inactive-color="#e3e3e3"></u-switch>
			</view>
		</view>
		<view class="map_box mar_top">
			<view style="border-radius: 20rpx;overflow: hidden;">
				<map style="width: 100%; height: 450rpx;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
			</view>
			<view class="status mar_top_big">
				<text style="color: #9b9b9b;">学生平板状态：</text><text v-if="isOnline==1" style="color: green;">在线</text><text v-else >离线</text>
			</view>
			<view style="padding: 40rpx 220rpx;">
				<u-button type="primary" shape="circle" :custom-style="{height:'60rpx',borderRadius:'25rpx'}" @click="refreshSn">刷新</u-button>
			</view>
			<view class="footer_info box">
				<view class="left">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/location.png" mode="widthFix" style="width: 25rpx;margin-right: 4rpx;"></image><text>当前位置：</text>
				</view>
				<view class="right box box-align-center box-pack-between">
					<view class="address">
						{{address}}
					</view>
					<view class="icon" v-if="false">
						<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/go.png" mode="widthFix" style="width: 40rpx;"></image>
						<view class="txt">去这里</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getSnLocation, refreshSnLocation } from '../../api/systemControl';
import { mapGetters,mapActions } from 'vuex';

	export default {
		data() {
			return {
				locationChecked:true,
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					width:15,
					height:20,
					iconPath: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/location.png'
				}],
				address: '未知'
			};
		},
		onLoad() {
			this.getSnLocationControl()
		},
		onShow() {
			this.getSnOnline()
			console.log("这是isOnlie", this.isOnline)
		},
		methods: {
			...mapActions(['getSnOnline']),
			getSnLocationControl() {
				getSnLocation({
					id: uni.getStorageSync('snId')
				}).then(res => {
					let data = res.data
					this.longitude = data.longitude
					this.latitude = data.latitude
					this.address = data.address
				}).catch(err => {
				})
			},
			refreshSn() {
				refreshSnLocation({
					id: uni.getStorageSync('snId'),
					userId: uni.getStorageSync('userId')
				}).then(res => {
					this.getSnLocationControl()
					this.$refs.uToast.show({
						title: res.msg,
						icon: false,
						type: 'success'
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						icon: false,
						type: 'error'
					})
				})
			}
		},
		computed: {
			...mapGetters(['isOnline'])
		}
	}
</script>

<style lang="scss" scoped>
.header_switc{
	border-radius: 30rpx;
	background: #5070b9;
	padding: 50rpx 40rpx;
	.left{
		width: 78%;
		.tit{
			font-size: 30rpx;
			color: #fff;
		}
		.sub_tit{
			font-size: 24rpx;
			color: #7d9ce1;
		}
	}
}
.map_box{
	border-radius: 30rpx;
	padding: 40rpx;
	background-color: #fff;
	.status{
		text-align: center;
	}
	.footer_info{
		font-size: 22rpx;
		padding: 20rpx 0;
		.left{
			padding-top: 3rpx;
			white-space: nowrap;
			color: #cecece;
		}
		.right{
			.address{
				width: 75%;
				line-height: 34rpx;
				color: #383838;
			}
			.icon{
				text-align: center;
				color: #4b90f1;
				.txt{
					font-size: 20rpx;
				}
			}
		}
	}
}
</style>
